<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <div [innerHTML]="'DEMO.DATATABLE.DESCRIPTION' | translate"></div>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-datatable</h3>
        <p>{{'DEMO.DATATABLE.INTRO.0' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>value</free-table-cell>
              <free-table-cell>
                <ng-template><code>Array</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>border</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>striped</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>hover</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>selectionMode</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>pagination</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.5' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>row</free-table-cell>
              <free-table-cell>
                <ng-template><code>Number</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.6' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>expandableRows</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.7' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>scrollable</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.8' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
        <h4>{{'EVENT' | translate}}</h4>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onSelect</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.EVENTS.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
      <div class="free-demo-row">
        <h3 class="free-title">free-datatable-column</h3>
        <p><ng-template>{{'DEMO.DATATABLE.INTRO.1' | translate}}</ng-template></p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>field</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.9' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>header</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.10' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>sort</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.DATATABLE.OPTION.11' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>
    </div>

    <div fGrid="6" class="free-demo-board">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;DatatableModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="book">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <free-datatable-column field="job" header="job"></free-datatable-column>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="book"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="job" header="job"&gt;&lt;/free-datatable-column&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Resize</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="book" [border]="true" [resizable]="true">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <free-datatable-column field="job" header="job"></free-datatable-column>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="book" [border]="true" [resizable]="true"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="job" header="job"&gt;&lt;/free-datatable-column&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">SelectionMode</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="book" [selectionMode]="'multiple'" (onSelect)="onDataSelect($event)">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <free-datatable-column field="job" header="job"></free-datatable-column>
            </free-datatable>
            <free-datatable [value]="book" [selectionMode]="'single'">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <free-datatable-column field="job" header="job"></free-datatable-column>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="book" [selectionMode]="'multiple'"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="job" header="job"&gt;&lt;/free-datatable-column&gt;
              &lt;/free-datatable&gt;
              &lt;free-datatable [value]="book" [selectionMode]="'single'"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="job" header="job"&gt;&lt;/free-datatable-column&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Pagination</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="book" [pagination]="true" [row]="2">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <free-datatable-column field="job" header="job">
                <ng-template let-col let-row="rowData">{{row['job']}}</ng-template>
              </free-datatable-column>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="book" [pagination]="true" [row]="2"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="job" header="job"&gt;
                  &lt;ng-template let-col let-row="rowData"&gt;&#123;&#123;b?.job&#125;&#125;&lt;/ng-template&gt;
                &lt;/free-datatable-column&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Sort</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="users" [row]="2" [sort]="true">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="users" [row]="2" [sort]="true"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Expand</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="book" [expandableRows]="true">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <ng-template fTemplate="rowexpansion" let-b>
                {{b['job']}}
              </ng-template>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="book" [expandableRows]="true"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;ng-template fTemplate="rowexpansion" let-b&gt;
                  &#123;&#123;b?.job&#125;&#125;
                &lt;/ng-template&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Scrollable</h3>
        <free-tab-group direction="right" [theme]="'line'">
          <free-tab header="PREVIEW">
            <free-datatable [value]="persons" [scrollable]="true" [border]="true">
              <free-datatable-column field="name" header="name"></free-datatable-column>
              <free-datatable-column field="age" header="age"></free-datatable-column>
              <free-datatable-column field="address" header="address"></free-datatable-column>
              <ng-template fTemplate="rowexpansion" let-b>
                {{b['job']}}
              </ng-template>
            </free-datatable>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-datatable [value]="persons" [scrollable]="true" [border]="true"&gt;
                &lt;free-datatable-column field="name" header="name"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="age" header="age"&gt;&lt;/free-datatable-column&gt;
                &lt;free-datatable-column field="address" header="address"&gt;&lt;/free-datatable-column&gt;
                &lt;ng-template fTemplate="rowexpansion" let-b&gt;
              &#123;&#123;b?.job&#125;&#125;
                &lt;/ng-template&gt;
              &lt;/free-datatable&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>

  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
